<template>
	<div class="page view-setting-day">
		<div class="list-box">
			<div class="list-item flex_c_s" v-for="(value, key) in sysinfo" :key="key">
				<span>{{ key }}</span>
				<span>{{ value }}</span>
			</div>
			<u-button type="primary" :plain="true" text="更新" @click="update"></u-button>
		</div>
	</div>
</template>

<script>
	// import { mapState, mapMutations } from 'vuex';
	export default {
		data() {
			return {
				sysinfo: {}
			};
		},
		computed: {
			// ...mapState(['userInfos'])
		},
		created() {
			// this.styleModel = this.$root.style === 'night';
			this.initData();
		},
		methods: {
			changeStyle() {
				uni.setStorageSync('shareSkin', this.$root.style);
			},
			getStyle(str) {
			},
			update() {
				uni.$emit('updatesys', {
					msg: '页面更新'
				})
			},
			// 退出
			initData() {
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
 						console.log(res)
						that.sysinfo = res;
						// vm.platform = res.platform //ios  or android
						// vm.appid=res.appId
						// vm.version=res.appVersionCode
						// vm.systeminfo=res
						// vm.getUpdateInfo();
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.view-setting-day {
		.img {
			width: 100%;
			height: 100%;
		}

		.flex_c_s {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.flex_c {
			display: flex;
			align-items: center;
		}

		.flex {
			display: flex;
		}

		.head-box {
			padding: 0.625rem 1.1875rem;
		}

		.changeHead {
			font-size: 0.875rem;
			font-family: PingFang SC;
			font-weight: 400;
			position: relative;

			.upload-header {
				width: 100%;
				height: 100%;
				position: absolute;
				display: block;
				left: 0;
				top: 0;
				z-index: 999;
				opacity: 0;
			}
		}

		.icon-more {
			width: 0.3125rem;
			height: 0.5rem;
			display: inline-block;
			margin-left: 0.625rem;
		}

		.head-img {
			width: 3.3125rem;
			height: 3.3125rem;
			border-radius: 3rem;
			overflow: hidden;
		}

		.line {
			height: 0.625rem;
			width: 100%;
		}

		.list-box {
			margin-top: 0.625rem;
		}

		.list-item {
			font-size: 0.875rem;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			padding: 1.25rem 0.9375rem;
			border-bottom: 1upx solid #484136;

			span {
				&:nth-of-type(1) {
					flex: none;
				}
			}

			span:first-child {
				// color: #f0cd99;
			}
		}

		.loginOut {
			height: 2.8125rem;
			line-height: 2.8125rem;
			margin: 0 0.9375rem;
			margin-top: 2rem;
			text-align: center;
			border-radius: 10px;
			background-image: -moz-linear-gradient(90deg, rgb(70, 60, 47) 19%, rgb(98, 81, 56) 100%);
			background-image: -webkit-linear-gradient(90deg, rgb(70, 60, 47) 19%, rgb(98, 81, 56) 100%);
			background-image: -ms-linear-gradient(90deg, rgb(70, 60, 47) 19%, rgb(98, 81, 56) 100%);
			box-shadow: 0px 2px 0px 0px rgba(44, 50, 87, 0.5);
			font-size: 0.875rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #f9d5a1;
		}
	}

	.view-setting-night {
		background: #343131;

		img {
			width: 100%;
			height: 100%;
		}

		.flex_c_s {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.flex_c {
			display: flex;
			align-items: center;
		}

		.flex {
			display: flex;
		}

		.head-box {
			padding: 0.625rem 1.1875rem;
			background: #343131;
		}

		.changeHead {
			font-size: 0.875rem;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			position: relative;

			.upload-header {
				width: 100%;
				height: 100%;
				position: absolute;
				display: block;
				left: 0;
				top: 0;
				z-index: 999;
				opacity: 0;
			}
		}

		.icon-more {
			width: 0.3125rem;
			height: 0.5rem;
			display: inline-block;
			margin-left: 0.625rem;
		}

		.head-img {
			width: 3.3125rem;
			height: 3.3125rem;
			border-radius: 3rem;
			overflow: hidden;
		}

		.line {
			height: 0.625rem;
			width: 100%;
			background: #232020;
		}

		.list-box {
			background: #343131;
			margin-top: 0.625rem;
		}

		.list-item {
			font-size: 0.875rem;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			padding: 1.25rem 0.9375rem;
			border-bottom: 0.03125rem solid rgba(0, 0, 0, 0.05);

			span {
				&:nth-of-type(1) {
					flex: none;
				}
			}
		}
	}
</style>